<template>
    <div class="center_div">
        <el-table :data="allMeeting" v-loading="tableLoading" element-loading-text="Loading">
            <el-table-column prop="meetingname" label="会议名" min-width="70"></el-table-column>
            <el-table-column prop="roomname" label="会议室" min-width="90"></el-table-column>
            <el-table-column prop="starttime" label="开始时间" min-width="130"></el-table-column>
            <el-table-column prop="endtime" label="结束时间" min-width="130"></el-table-column>
            <el-table-column prop="reservationtime" label="预定时间" min-width="130"></el-table-column>
            <el-table-column prop="canceledtime" label="取消时间" min-width="130"></el-table-column>
            <el-table-column prop="description" label="会议描述" min-width="70" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="status" label="状态" min-width="70" >
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.status === 0" type="info">取消</el-tag>
                    <el-tag v-if="scope.row.status === 1" type="success">正常</el-tag>
                    <el-tag v-if="scope.row.status === 2">审核</el-tag>
                    <el-tag v-if="scope.row.status === 3" type="danger">取消中</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" min-width="150" align="center">
                <template slot-scope="scope">
                    <el-button type="danger" @click="delMeeting(scope.row.meetingid)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

    </div>
</template>

<script>
    export default {
        name: "amuse-grant",
        data() {
            return{
                allMeeting:  [
                ],
                roomList: {},
                tableLoading: false
            }
        },
        created() {
            this.fetchMeetingList()
            clearTimeout(this.timer);  //清除延迟执行
            this.timer = setTimeout(()=>{   //设置延迟执行
                this.fetchMeeting()
            },300)
        },
        methods: {
            handleClick(key) {
                console.log(key)
            },
            async delMeeting(meetingid){
                console.log(meetingid)
                this.$confirm('确认删除吗？','警告',{
                    confirmButtonText: '确 认',
                    cancelButtonText:'取 消',
                    type:'warning'
                }).then(()=>{
                    this.MeetingDel(meetingid)
                })
            },
            async fetchMeeting(){
                this.tableLoading = true
                let {code ,data ,msg} = await this.$post('/managerboss/adminmeeting')
                if(code === 200) {
                    this.allMeeting = data.map(item => {
                        item.roomname = this.roomList[item.roomid]
                        return item
                    })
                }else {
                    this.$message.error(msg)
                }
                this.tableLoading = false
            },
            async fetchMeetingList(){
                let {code ,data ,msg} = await this.$post('/meetingrooms')
                if(code === 200) {
                    for (let i = 0; i < data.length; i++) {
                        this.roomList[data[i].roomid] = data[i].roomname
                    }
                }else {
                    this.$message.error(msg)
                }
            },
            async MeetingDel(id){
                let {code ,data ,msg} = await this.$post('/managerboss/deletemeeting',{
                    data: {id: id}
                })
                if(code !== 200) {
                    console.log(data)
                    this.$message.error('失败：' + msg)
                } else {
                    this.$message({
                        message: '成功删除会议',
                        type: 'success'
                    })
                }
            }
        }
    }
</script>

<style >
    .center_div{
        width: 90%;
        margin:0 auto;
        margin-bottom: 50px;
    }
</style>